<template>
  <div :id="'pagingSeal'+icon" class="move-seal" @mousedown="move">
    <div v-if="icon==1" class="seal-body">
      <i
        :class="['el-icon-error', !isPaging ? 'right' : 'left']"
        @click="del"
      ></i>
      <img v-lazy="src" class="s-icon" ondragstart="return false;"
           :style="{width: width + 'px',height: height + 'px'}"
      />
    </div>

    <div v-if="icon==2" class="seal-body">
      <i
        :class="['el-icon-error', !isPaging ? 'right' : 'left']"
        @click="del"
      ></i>

      <div v-for="(item,index) in generatePagingSealList" :key="index">
        <img v-if="pageIndex === item.page" v-lazy="item.url" class="s-icon"
             :style="{height: height + 'px'}"
             ondragstart="return false;"
        />
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'Seal',
  props: {
    generatePagingSealList: {
      type: Array
    },
    suraData: {
      type: Object
    },
    src: {
      type: String,
      default: '@/assets/iwmp/img/testsign.png'
    },
    // 1=>正常盖章      2=>加盖骑缝章
    icon: {
      type: Number,
      default: 1
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    isPaging: {
      type: Boolean,
      default: false
    },
    pageIndex: {
      type: Number,
      default: 1
    },
    pdfDetail: {
      type: Object
    },
    page: {
      type: Number
    }

  },
  data() {
    return {
      pdfImgBaseUrl: this.$pdfImgBaseUrl,
      positionX: this.x,
      positionY: this.y
    }
  },
  watch: {
    x() {
      this.positionX = this.x
    },
    y() {
      this.positionY = this.y
    }
  },
  methods: {
    del() {
      this.$emit('del')
    },
    move(e) {
      // 算出鼠标相对元素的位置
      let disX = e.clientX - this.$el.offsetLeft
      let disY = e.clientY - this.$el.offsetTop
      document.onmousemove = e => {
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let top = e.clientY - disY
        if (top < 0) {
          top = 0
        }
        if (top > this.pdfDetail.height[0] - this.suraData.suraSizeWidthAnHeight) {
          top = this.pdfDetail.height[0] - this.suraData.suraSizeWidthAnHeight
        }
        this.positionY = top
        this.$el.style.top = top + 'px'
        if (this.icon === 1) {
          this.$emit('update:y', top)
        } else if (this.icon === 2) {
          // this.$emit('updatePagingSealy', top)
          this.$emit('update:y', top)
          let pagingSealList = document.querySelectorAll('#pagingSeal' + this.icon)
          pagingSealList.forEach(item => {
            item.style.top = top + 'px'
          })
        }
        if (this.isPaging) {
          return
        }
        let left = e.clientX - disX
        if (left < 0) {
          left = 0
        }
        if (left > this.pdfDetail.width[this.page - 1] - this.suraData.suraSizeWidthAnHeight) {
          left = this.pdfDetail.width[this.page - 1] - this.suraData.suraSizeWidthAnHeight
        }

        // 绑定元素位置到positionX和positionY上面
        this.positionX = left
        // 移动当前元素
        this.$el.style.left = left + 'px'

        this.$emit('update:x', left)
      }
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },
  mounted() {
    if (this.icon === 1) {
      this.$el.style.left = this.positionX + 'px'
      this.$el.style.top = this.positionY + 'px'
      document.onselectstart = function() {
        return false
      } // 解决拖动会选中文字的问题
    } else {
      this.$el.style.right = this.positionX + 'px'
      this.$el.style.top = this.positionY + 'px'
      document.onselectstart = function() {
        return false
      } // 解决拖动会选中文字的问题
    }

  }
}
</script>

<style lang="scss" scoped>
.move-seal {
  position: absolute;
  cursor: move;
  border: 1px solid #108ee9;
  background: rgba(0, 160, 233, 0.1);

  .seal-body {
    padding: 0;
    position: relative;

    i {
      position: absolute;
      top: -10px;
      font-size: 26px;
      color: #999;
      width: 26px;
      height: 26px;
      background-color: #fff;
      border-radius: 13px;
      cursor: pointer;
    }

    .right {
      right: -10px;
    }

    .left {
      left: -10px;
    }
  }
}

.s-icon {

}
</style>
